<template>
  <div class="app-container container-table">
    <el-table
      :data="insideTableData"
      :stripe="stripe ? stripe : false"
      :border="border"
      @selection-change="handleSelectionChange"
      size="small"
      style="width: 100%"
      tooltip-effect="light"
    >
      <el-table-column
        type="selection"
        v-if="selection"
        width="50"
        align="center"
      ></el-table-column>
      <el-table-column
        label="序号"
        type="index"
        v-if="indexClum"
        :width="indexWidth"
        :index="indexMethod"
        align="center"
      ></el-table-column>
      <el-table-column
        :key="idx"
        :label="column.title ? column.title : null"
        :prop="column.key ? column.key : null"
        :type="column.type"
        :width="column.width"
        :min-width="column.minWidth"
        :sortable="sortable || column.sortable"
        :class-name="column.link ? 'link-col' : ''"
        show-overflow-tooltip
        tooltip-effect="light"
        v-for="(column, idx) in insideColumns"
      >
        <template slot-scope="scope">
          <span
            @click="column.link ? column.link(scope.row) : () => {}"
            :class="{
              'link-btn': !!column.link,
              [column.class ? column.class(scope.row) : '']: true,
            }"
          >
            <i
              v-if="column.prefix && scope.row[column.key]"
              :class="column.prefix(scope.row)"
              class="fix-icon"
            ></i>
            {{
              column.formatType
                ? column.formatType(scope.row)
                : scope.row[column.key]
            }}
          </span>
          <i v-if="column.suffix" :class="column.suffix" class="fix-icon"></i>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        class="box"
        label="操作"
        :min-width="surportOption.minWidth || '124px'"
        :width="surportOption.width"
        v-if="surportOption.show"
      >
        <template slot-scope="scope">
          <template v-for="(item, idx) in surportOption.items">
            <el-tooltip
              placement="bottom"
              :key="idx"
              :content="item.title"
              :disabled="!!item.text"
              v-if="!item.isShow || (item.isShow && item.isShow(scope.row))"
            >
              <i
                v-if="!item.text"
                :class="item.icon ? item.icon : 'vc-icon vc-icon-table-edit'"
                @click="item.click(scope.row)"
                class="opt-icon optionIcon cur"
              ></i>

              <el-button
                v-else-if="item.isShow(scope.row)"
                type="text"
                @click="item.click(scope.row)"
                >{{ item.text }}</el-button
              >
            </el-tooltip>
          </template>
          <i
            class="vc-icon icon-more opt-icon optionIcon cur"
            v-if="surportOption.items.length > 2"
          ></i>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<style lang="less">
.container-table {
  .cur {
    cursor: pointer;
  }
  .cell i.optionIcon {
    font-size: 20px !important;
  }
  .optionIcon {
    font-size: 18px !important;
    padding: 0 !important;
  }
}
</style>
<script>
export default {
  name: 'Tables',
  props: {
    value: {
      type: Array,
      default () {
        return []
      }
    },
    columns: {
      type: Array,
      default () {
        return []
      }
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    size: String,
    width: {
      type: [Number, String]
    },
    height: {
      type: [Number, String]
    },
    stripe: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    sortable: {
      type: Boolean,
      default: true
    },
    highlightRow: {
      type: Boolean,
      default: false
    },
    rowClassName: {
      type: Function,
      default () {
        return ''
      }
    },
    context: {
      type: Object
    },
    noDataText: {
      type: String
    },
    noFilteredDataText: {
      type: String
    },
    disabledHover: {
      type: Boolean
    },
    loading: {
      type: Boolean,
      default: false
    },
    /**
     * @description 全局设置是否可编辑
     */
    editable: {
      type: Boolean,
      default: false
    },
    /**
     * @description 是否可搜索
     */
    searchable: {
      type: Boolean,
      default: false
    },
    /**
     * @description 搜索控件所在位置，'top' / 'bottom'
     */
    searchPlace: {
      type: String,
      default: 'top'
    },
    currentPage: Number,
    pageSize: Number
  },
  data () {
    return {
      insideColumns: [],
      insideTableData: [],
      surportOption: {
        show: false,
        items: [
          {
            title: '自定义操作',
            click: () => { }
          }
        ]
      },
      selection: false,
      indexClum: false,
      indexWidth: '50',
      surColumns: []
    }
  },
  methods: {
    /**
     * 格式化序号列
     */
    indexMethod (index) {
      if (!this.currentPage || !this.pageSize) {
        return index + 1
      }
      let len = `${this.currentPage * this.pageSize - 1}`.length
      this.indexWidth = len < 4 ? '50' : `${Math.min(9, len) * 10 + 20}`
      return this.GLOBAL.formatter.formatIndex(index, this.currentPage, this.pageSize)
    },
    /**
     * 处理表格数据
     * @tableData
     **/
    handleTableData () {
      this.insideTableData = this.value.map((item, index) => {
        return item
      })
    },
    /**
     *  处理表格头部
     * @columns
     **/
    handleColumns () {
      this.surColumns = []
      this.insideColumns = this.columns
        .map((item, index) => {
          let res = item
          switch (res.type) {
            case 'option':
              this.surportOption.show = true
              this.surportOption.items = res.items
              this.surportOption.minWidth = res.minWidth
              this.surportOption.width = res.width
              break
            case 'selection':
              this.selection = true
              break
            case 'index':
              this.indexClum = true
              break
            default:
              return res
          }
        })
        .filter(Boolean)
    },
    /**
     *  多选
     **/
    handleSelectionChange (selection) {
      this.$emit('on-selection-change', selection)
    },
    /*
      预留功能
    */
    /*
      可编辑
    */
    suportEdit (item, index) {
      item.render = (h, params) => {
        return h(TablesEdit, {
          props: {
            params: params,
            value: this.insideTableData[params.index][params.column.key],
            edittingCellId: this.edittingCellId,
            editable: this.editable
          },
          on: {
            input: val => {
              this.edittingText = val
            },
            'on-start-edit': params => {
              this.edittingCellId = `editting-${params.index}-${params.column.key}`
              this.$emit('on-start-edit', params)
            },
            'on-cancel-edit': params => {
              this.edittingCellId = ''
              this.$emit('on-cancel-edit', params)
            },
            'on-save-edit': params => {
              this.value[params.row.initRowIndex][
                (params.column.key)
              ] = this.edittingText
              this.$emit('input', this.value)
              this.$emit(
                'on-save-edit',
                Object.assign(params, { value: this.edittingText })
              )
              this.edittingCellId = ''
            }
          }
        })
      }
      return item
    },
    exportCsv (params) {
      this.$refs.tablesMain.exportCsv(params)
    },
    clearCurrentRow () {
      this.$refs.tablesMain.clearCurrentRow()
    },
    onCurrentChange (currentRow, oldCurrentRow) {
      this.$emit('on-current-change', currentRow, oldCurrentRow)
    },
    onSelect (selection, row) {
      this.$emit('on-select', selection, row)
    },
    onSelectCancel (selection, row) {
      this.$emit('on-select-cancel', selection, row)
    },
    onSelectAll (selection) {
      this.$emit('on-select-all', selection)
    },
    onSelectionChange (selection) {
      this.$emit('on-selection-change', selection)
    },
    onSortChange (column, key, order) {
      this.$emit('on-sort-change', column, key, order)
    },
    onFilterChange (row) {
      this.$emit('on-filter-change', row)
    },
    onRowClick (row, index) {
      this.$emit('on-row-click', row, index)
    },
    onRowDblclick (row, index) {
      this.$emit('on-row-dblclick', row, index)
    },
    onExpand (row, status) {
      this.$emit('on-expand', row, status)
    }
  },
  mounted () {
    this.handleColumns()
    this.handleTableData()
  },
  watch: {
    columns (columns) {
      this.handleColumns(columns)
    },
    value (val) {
      this.handleTableData()
    }
  }
}
</script>
